<template>
  <div id="merchant-rebate">
    <div class="card">
      <div class="card-header">
        <div class="title">转账流程</div>
      </div>
      <div class="card-content">
        <div class="page-upper-half">
          <div class="left-box">
            <div class="title">批量转账流程（只支持招商银行）：</div>
            <div class="steps">
              <div class="step">
                <div><div class="step-number">1</div><div class="step-line"></div></div>
                <div class="step-tips">导出<p>转账信息</p></div>
              </div>
              <div class="step">
                 <div><div class="step-number">2</div><div class="step-line"></div></div>
                <div class="step-tips">在网银进行<p>转账操作</p></div>
              </div>
              <div class="step">
                 <div><div class="step-number">3</div><div class="step-line"></div></div>
                <div class="step-tips">返回平台<p><span class="redColorStyle">标记转账失败</span>订单</p></div>
              </div>
              <div class="step">
                 <div><div class="step-number">4</div></div>
                <div class="step-tips">最后<p><span class="redColorStyle">标记转账成功</span>订单</p></div>
              </div>
            </div>
            <div class="title">默认转账银行卡：</div>
            <div class="user-info">
                <div class="user-bank-box">
                  <div class="bank-name">{{merchantUserInfo.bank ? merchantUserInfo.bank : '暂无'}}</div>
                  <!-- <div class="bank-number">{{merchantUserInfo.bank_num ? merchantUserInfo.bank_num.replace(/\s/g,'').replace(/(\d{4})\d+(\d{4})$/, "**** **** **** $2") : '暂无'}}</div> -->
                  <div class="bank-number">{{merchantUserInfo.bank_num ? merchantUserInfo.bank_num : '暂无'}}</div>

                  <div class="bank-opt"><span class="user-name">开户人：{{merchantUserInfo.bank_user_name ? merchantUserInfo.bank_user_name : '暂无'}}</span><span class="modify-btn" @click="bankDialog = true">修改</span></div>
                </div>
                <div class="user-weChat-box">
                  <div class="user-weChat-name">微信昵称</div>
                  <div class="user-weChat-number">{{merchantUserInfo.wechat_nick ? merchantUserInfo.wechat_nick : '暂无'}}</div>
                  <div class="user-weChat-opt"><span class="edit-btn" @click="weChatDialog = true">编辑</span></div>
                </div>
            </div>
          </div>
          <div class="right-box">
              <div class="provision-box">
                <div class="title">转账相关规定：</div>
                <div class="provision-content">1、必须在每天<span class="redColorStyle">中午12：00前</span>完成前一天的所有转账，并对每笔超时订单处罚2({{merchantMoneyText}})；</div>
                <div class="provision-content">2、严禁使用支付宝转账，一经发现将终止合作；</div>
                <div class="provision-content">3、对于超时未转账的订单，买家有权申请退款；</div>
                <div class="provision-content">4、对于多次超时的卖家，平台有权终止合作。</div>
              </div>
              <div class="problem-box">
                <div class="problem-title" @click="toProblemPage(1)"><img src="../../assets/image/smiley_img.png" alt="">招商银行批量转账问题详解</div>
                <div class="problem-title" @click="toProblemPage(2)"><img src="../../assets/image/smiley_img.png" alt="">招商银行批量转账说明</div>
                <div class="problem-title" @click="toProblemPage(3)"><img src="../../assets/image/smiley_img.png" alt="">卖家转账常见问题</div>
              </div>
          </div>
        </div>

      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <div class="title">返款列表</div>
      </div>
      <div class="card-content">
        <div>
          <div class="tabs">
            <div v-for="(item,index) in tabs" :key="index" class="tab-pane" :class="curTab == item.id ? 'active':''" @click="changeTab(item)">{{item.label}}</div>
          </div>
        </div>
        <div>
          <div v-if="curTab == 1">
            <div class="table-opt-box">
              <el-form>
                <el-form-item label="订单编号 ：">
                  <el-input placeholder="请输入订单编号" v-model="form[curTab].orderNum" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="推手账号 ：">
                  <el-input placeholder="请输入推手账号" v-model="form[curTab].phone" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="推手姓名 ：">
                  <el-input placeholder="请输入推手姓名" v-model="form[curTab].name" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="任务编号 ：">
                  <el-input placeholder="请输入任务编号" v-model="form[curTab].taskCode" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="平台账号 ：">
                  <el-input placeholder="请输入平台账号" v-model="form[curTab].platformName" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button class="search-btn" icon="el-icon-ali-search" @click="searchTable">查询</el-button>
                  <el-button class="export-btn" icon="el-icon-download" @click="exportExcel">导出</el-button>
                </el-form-item>
                <el-form-item style="float: right;">
                  <el-button class="success-btn" @click="showBatchDialog('success')">一键转账成功</el-button>
                  <el-button class="fail-btn" @click="showBatchDialog('fail')">转账失败</el-button>
                </el-form-item>
              </el-form>
            </div>
            <el-table :data="tableData[curTab]" border @selection-change="tableSelectionChange" key="table1">
             <el-table-column type="selection" width="55"></el-table-column>
             <el-table-column prop="task_code" label="任务编号"></el-table-column>
             <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
             <el-table-column prop="order_num" label="订单编号"></el-table-column>
             <el-table-column prop="push_phone" label="推手账号"></el-table-column>
             <el-table-column prop="rebate_capital" label="转账本金">
               <div slot-scope="scope">
                 <span style="color: #ee7b5a;">{{scope.row.rebate_capital}}</span>
               </div>
             </el-table-column>
             <el-table-column prop="push_name" label="提现人"></el-table-column>
             <el-table-column prop="bank_num" label="卡号"></el-table-column>
             <el-table-column prop="bank" label="银行"></el-table-column>
             <el-table-column prop="bank_name" label="开户行"></el-table-column>
             <el-table-column prop="wechat_nick" label="微信昵称"></el-table-column>
             <el-table-column prop="wx_pay_code" label="微信收款码">
               <el-popover placement="right" trigger="hover" slot-scope="scope" v-if="scope.row.wx_pay_code">
                 <img class="wxpaycode-preview-img" :src="scope.row.wx_pay_code"/>
                 <img slot="reference" :src="scope.row.wx_pay_code"  style="width: 80px;height: 80px">
               </el-popover>
             </el-table-column>

             <el-table-column prop="status" label="转账状态">
               <div slot-scope="scope">
                 <span style="color: red;">{{status[scope.row.status]}}</span>
               </div>
             </el-table-column>
             <el-table-column prop="over_time" label="转账截止时间" :formatter="changeOverTimeType"></el-table-column>
            </el-table>
            <div class="block" style="margin: 20px 0px; text-align: right;">
            	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form[curTab].page"
            	:page-sizes="[10, 15, 20, 25]" :page-size="form[curTab].pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalPage[curTab]"></el-pagination>
            </div>
            <div >
              <el-table :data="allTableData" id="waitRebateOrder"  border key="table11" v-show="false">
               <el-table-column prop="task_code" label="任务编号"></el-table-column>
               <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
               <el-table-column prop="order_num" label="订单编号"></el-table-column>
               <el-table-column prop="push_phone" label="推手账号"></el-table-column>
               <el-table-column prop="rebate_capital" label="转账本金"></el-table-column>
               <el-table-column prop="push_name" label="提现人"></el-table-column>
               <el-table-column prop="bank_num" label="卡号"></el-table-column>
               <el-table-column prop="bank" label="银行"></el-table-column>
               <el-table-column prop="bank_name" label="开户行"></el-table-column>
               <el-table-column prop="wechat_nick" label="微信昵称"></el-table-column>
               <el-table-column prop="wx_pay_code" label="微信收款码">
                 <el-popover placement="right" trigger="hover" slot-scope="scope" v-if="scope.row.wx_pay_code">
                   <img class="wxpaycode-preview-img" :src="scope.row.wx_pay_code"/>
                   <img slot="reference" :src="scope.row.wx_pay_code"  style="width: 80px;height: 80px">
                 </el-popover>
               </el-table-column>

               <el-table-column prop="status" label="转账状态" :formatter="getStatusName"></el-table-column>
               <el-table-column prop="over_time" label="转账截止时间" :formatter="changeOverTimeType"></el-table-column>
              </el-table>
            </div>
          </div>
          <div v-if="curTab == 2">
            <div class="table-opt-box">
              <el-form>
                <el-form-item label="订单编号 ：">
                  <el-input placeholder="请输入订单编号" v-model="form[curTab].orderNum" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="推手账号 ：">
                  <el-input placeholder="请输入推手账号" v-model="form[curTab].phone" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="推手姓名 ：">
                  <el-input placeholder="请输入推手姓名" v-model="form[curTab].name" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="任务编号 ：">
                  <el-input placeholder="请输入任务编号" v-model="form[curTab].taskCode" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="平台账号 ：">
                  <el-input placeholder="请输入平台账号" v-model="form[curTab].platformName" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button class="search-btn" icon="el-icon-ali-search" @click="searchTable">查询</el-button>
                </el-form-item>
              </el-form>

            </div>
            <el-table :data="tableData[curTab]" border key="table2">
             <el-table-column prop="task_code" label="任务编号"></el-table-column>
             <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
             <el-table-column prop="order_num" label="订单编号"></el-table-column>
             <el-table-column prop="push_phone" label="推手账号"></el-table-column>
             <el-table-column prop="rebate_capital" label="转账本金"></el-table-column>
             <el-table-column prop="push_name" label="提现人"></el-table-column>
             <el-table-column prop="bank_num" label="卡号"></el-table-column>
             <el-table-column prop="bank_name" label="开户行"></el-table-column>
             <el-table-column prop="wechat_nick" label="微信昵称"></el-table-column>
             <el-table-column prop="wx_pay_code" label="微信收款码">
               <el-popover placement="right" trigger="hover" slot-scope="scope" v-if="scope.row.wx_pay_code">
                 <img class="wxpaycode-preview-img" :src="scope.row.wx_pay_code"/>
                 <img slot="reference" :src="scope.row.wx_pay_code"  style="width: 80px;height: 80px">
               </el-popover>
             </el-table-column>
             <el-table-column prop="status" label="转账状态" :formatter="getStatusName"></el-table-column>
             <el-table-column prop="over_time" label="转账截止时间" :formatter="changeOverTimeType"></el-table-column>
            </el-table>
            <div class="block" style="margin: 20px 0px; text-align: right;">
            	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form[curTab].page"
            	:page-sizes="[10, 15, 20, 25]" :page-size="form[curTab].pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalPage[curTab]"></el-pagination>
            </div>
          </div>
          <div v-if="curTab == 3">
            <div class="table-opt-box">
              <el-form>
                <el-form-item label="订单编号 ：">
                  <el-input placeholder="请输入订单编号" v-model="form[curTab].orderNum" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="推手账号 ：">
                  <el-input placeholder="请输入推手账号" v-model="form[curTab].phone" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="推手姓名 ：">
                  <el-input placeholder="请输入推手姓名" v-model="form[curTab].name" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="任务编号 ：">
                  <el-input placeholder="请输入任务编号" v-model="form[curTab].taskCode" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="平台账号 ：">
                  <el-input placeholder="请输入平台账号" v-model="form[curTab].platformName" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button class="search-btn" icon="el-icon-ali-search" @click="searchTable">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            <el-table :data="tableData[curTab]" border key="table3">
             <el-table-column prop="task_code" label="任务编号"></el-table-column>
             <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
             <el-table-column prop="order_num" label="订单编号"></el-table-column>
             <el-table-column prop="push_phone" label="推手账号"></el-table-column>
             <el-table-column prop="rebate_capital" label="转账本金"></el-table-column>
             <el-table-column prop="push_name" label="提现人"></el-table-column>
             <el-table-column prop="bank_num" label="卡号"></el-table-column>
             <el-table-column prop="bank_name" label="开户行"></el-table-column>
             <el-table-column prop="wechat_nick" label="微信昵称"></el-table-column>
             <el-table-column prop="wx_pay_code" label="微信收款码">
               <el-popover placement="right" trigger="hover" slot-scope="scope" v-if="scope.row.wx_pay_code">
                 <img class="wxpaycode-preview-img" :src="scope.row.wx_pay_code"/>
                 <img slot="reference" :src="scope.row.wx_pay_code"  style="width: 80px;height: 80px">
               </el-popover>
             </el-table-column>
             <el-table-column prop="status" label="转账状态" :formatter="getStatusName"></el-table-column>
             <el-table-column prop="rebate_time" label="转账截止时间" :formatter="changeRebateTimeType"></el-table-column>
             <el-table-column prop="wx_pay_code" label="转账人银行卡号/姓名">
               <div slot-scope="scope">
                <div class="textColor">{{scope.row.rebate_bank_num}}</div>
                <div>{{scope.row.rebate_name}}</div>
               </div>
             </el-table-column>
            </el-table>
            <div class="block" style="margin: 20px 0px; text-align: right;">
            	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form[curTab].page"
            	:page-sizes="[10, 15, 20, 25]" :page-size="form[curTab].pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalPage[curTab]"></el-pagination>
            </div>
          </div>
          <div v-if="curTab == 4">
            <div class="table-opt-box">
              <el-form>
                <el-form-item label="订单编号 ：">
                  <el-input placeholder="请输入订单编号" v-model="form[curTab].orderNum" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="推手账号 ：">
                  <el-input placeholder="请输入推手账号" v-model="form[curTab].phone" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="推手姓名 ：">
                  <el-input placeholder="请输入推手姓名" v-model="form[curTab].name" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="任务编号 ：">
                  <el-input placeholder="请输入任务编号" v-model="form[curTab].taskCode" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="平台账号 ：">
                  <el-input placeholder="请输入平台账号" v-model="form[curTab].platformName" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button class="search-btn" icon="el-icon-ali-search" @click="searchTable">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            <el-table :data="tableData[curTab]" border key="table4">
             <el-table-column prop="task_code" label="任务编号"></el-table-column>
              <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
              <el-table-column prop="order_num" label="订单编号"></el-table-column>
              <el-table-column prop="push_phone" label="推手账号"></el-table-column>
              <el-table-column prop="rebate_capital" label="转账本金"></el-table-column>
              <el-table-column prop="push_name" label="提现人"></el-table-column>
              <el-table-column prop="bank_num" label="卡号"></el-table-column>
              <el-table-column prop="wechat_nick" label="微信昵称"></el-table-column>
              <el-table-column prop="wx_pay_code" label="微信收款码">
               <el-popover placement="right" trigger="hover" slot-scope="scope" v-if="scope.row.wx_pay_code">
                 <img class="wxpaycode-preview-img" :src="scope.row.wx_pay_code"/>
                 <img slot="reference" :src="scope.row.wx_pay_code"  style="width: 80px;height: 80px">
               </el-popover>
              </el-table-column>
              <el-table-column prop="status" label="转账状态" :formatter="getStatusName"></el-table-column>
              <el-table-column prop="remark" label="失败原因"></el-table-column>
             </el-table>
             <div class="block" style="margin: 20px 0px; text-align: right;">
             	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form[curTab].page"
             	:page-sizes="[10, 15, 20, 25]" :page-size="form[curTab].pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalPage[curTab]"></el-pagination>
             </div>
          </div>
          <div v-if="curTab == 5">
            <div class="table-opt-box">
              <el-form>
                <el-form-item label="订单编号 ：">
                  <el-input placeholder="请输入订单编号" v-model="form[curTab].orderNum" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="推手账号 ：">
                  <el-input placeholder="请输入推手账号" v-model="form[curTab].phone" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="推手姓名 ：">
                  <el-input placeholder="请输入推手姓名" v-model="form[curTab].name" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="任务编号 ：">
                  <el-input placeholder="请输入任务编号" v-model="form[curTab].taskCode" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="平台账号 ：">
                  <el-input placeholder="请输入平台账号" v-model="form[curTab].platformName" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button class="search-btn" icon="el-icon-ali-search" @click="searchTable">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
           <el-table :data="tableData[curTab]" border key="table5">
             <el-table-column prop="task_code" label="任务编号"></el-table-column>
             <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
             <el-table-column prop="order_num" label="订单编号"></el-table-column>
             <el-table-column prop="push_phone" label="推手账号"></el-table-column>
             <el-table-column prop="rebate_capital" label="转账本金"></el-table-column>
             <el-table-column prop="push_name" label="提现人"></el-table-column>
             <el-table-column prop="bank_num" label="卡号"></el-table-column>
             <el-table-column prop="bank_name" label="开户行"></el-table-column>
             <el-table-column prop="wechat_nick" label="微信昵称"></el-table-column>
             <el-table-column prop="wx_pay_code" label="微信收款码">
               <el-popover placement="right" trigger="hover" slot-scope="scope" v-if="scope.row.wx_pay_code">
                 <img class="wxpaycode-preview-img" :src="scope.row.wx_pay_code"/>
                 <img slot="reference" :src="scope.row.wx_pay_code"  style="width: 80px;height: 80px">
               </el-popover>
             </el-table-column>
             <el-table-column prop="status" label="转账状态" :formatter="getStatusName"></el-table-column>
             <el-table-column prop="appeal_reason" label="申诉原因"></el-table-column>
             <el-table-column label="操作"  fixed="right">
               <div slot-scope="scope">
                 <el-button class="appeal-btn" @click="showAppealDialog(scope.row)">申诉处理</el-button>
                </div>
             </el-table-column>
           </el-table>
           <div class="block" style="margin: 20px 0px; text-align: right;">
           	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form[curTab].page"
           	:page-sizes="[10, 15, 20, 25]" :page-size="form[curTab].pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalPage[curTab]"></el-pagination>
           </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="转账" :visible.sync="batchTransferDialog" width="400px" class="dialog-style">
      <p v-if="optType=='success'">是否确定进行批量转账操作?</p>
      <div v-else>
         <el-input
           type="textarea"
           :rows="2"
           placeholder="请输入失败原因"
           v-model="remark">
         </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancel-btn" @click="batchTransferDialog = false" style="padding:10px">取 消</el-button>
        <el-button class="submit-btn" type="primary" :loading="submitLoading" @click="batchTransferSuccess" style="padding:10px;border:1px solid;">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑微信昵称" :visible.sync="weChatDialog" width="350px" class="dialog-style">
      <div>
         <el-input
           type="text"
           placeholder="请输入微信昵称"
           v-model="weChatNick">
         </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancel-btn" @click="weChatDialog = false" style="padding:10px">取 消</el-button>
        <el-button class="submit-btn" type="primary" :loading="submitLoading" @click="editWechat" style="padding:10px;border:1px solid;">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改银行卡" :visible.sync="bankDialog" width="450px" class="dialog-style bank-dialog">
      <div>
          <div class="bank-user-info">
            <div><span class="title">姓名：</span>{{merchantUserInfo.bank_user_name}}</div>
            <div><span class="title">原转账银行卡：</span>{{oldBankInfo}}</div>
          </div>
          <div>
            <el-form ref="bankForm" :model="bankForm" :rules="bankRules" label-width="100px">
              <el-form-item label="姓名 ："  prop="bank_user_name">
                <el-input placeholder="请输入姓名" v-model="bankForm.bank_user_name" size="small" clearable></el-input>
              </el-form-item>
              <el-form-item label="银行 ："  prop="bank">
                <el-select v-model="bankForm.bank" placeholder="请选择银行" size="small">
                  <el-option v-for="(item, index) in bankNameData" :key="index" :label="item.label" :value="item.label"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="银行卡号 ："  prop="bank_num">
                <el-input placeholder="请输入银行卡号" v-model="bankForm.bank_num" size="small" clearable></el-input>
              </el-form-item>

            </el-form>
          </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancel-btn" @click="bankDialog = false" style="padding:10px">取 消</el-button>
        <el-button class="submit-btn" type="primary" :loading="submitLoading" @click="modifyBank" style="padding:10px;border:1px solid;">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="申诉" :visible.sync="appealDialog" width="400px" class="dialog-style">
      <div>
         <div class="">
           推手申诉原因：
           <p>{{appealReason}}</p>
         </div>
         <div>
           <div class="dialog-name">上传图片：</div>
           <div class="img-box">
             <el-upload
               class="avatar-uploader"
               :action="BASE_API_URL+'baseapi/wechart/uploadMerchantPushImg'"
               :data="uploadData"
               :show-file-list="false"
               :on-success="handleAvatarSuccess"
               :before-upload="beforeAvatarUpload">
               <i v-if="!appealForm.appealImg" class="el-icon-plus avatar-uploader-icon"></i>
               <img class="img-show" v-else :src="appealForm.appealImg" alt="">
             </el-upload>
           </div>
         </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancel-btn" @click="appealDialog = false" style="padding:10px">取 消</el-button>
        <el-button class="submit-btn" type="primary" :loading="submitLoading" @click="appeal" style="padding:10px;border:1px solid;">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    apiMerchantUserInfo,
    apiMerchantRebate,
    apiSubmitRebateCheck,
    apiSetWechat,
    apiSetBank,
    apiMerchantRebateAppealProcess
  } from '../../request/api.js'
  import { mapGetters,mapActions } from 'vuex';
  export default {
    data(){
      return{
        curTab: 1,
          tabs: [{
            id: 1,
            label: '待返款订单'
          },{
            id: 2,
            label: '超时返款订单'
          },{
            id: 3,
            label: '返款成功订单'
          },{
            id: 4,
            label: '返款失败订单'
          },{
            id: 5,
            label: '返款后申诉订单'
          }],
          batchTransferDialog: false,
          batchTransferIds: [],
          submitLoading: false,

          form: {
            1: {
              token: '',
              page: 1,
              pageSize:10,
              orderNum: '',
              status: 1,
              overtime: '',
              phone: '',
              name: '',
              platformName: '',
              taskCode: ''
            },
            2:{
              token: '',
              page: 1,
              pageSize:10,
              orderNum: '',
              status: 1,
              overtime: 1,
              phone: '',
              name: '',
              platformName: '',
              taskCode: '',
            },
            3:{
              token: '',
              page: 1,
              pageSize:10,
              orderNum: '',
              status: 2,
              overtime: '',
              phone: '',
              name: '',
              platformName: '',
              taskCode: ''
            },
            4:{
              token: '',
              page: 1,
              pageSize:10,
              orderNum: '',
              status: 3,
              overtime: '',
              phone: '',
              name: '',
              platformName: '',
              taskCode: ''
            },
            5:{
              token: '',
              page: 1,
              pageSize:10,
              orderNum: '',
              status: 4,
              overtime: '',
              phone: '',
              name: '',
              platformName: '',
              taskCode: ''
            }
          },
          tableData: {
            1:[],
            2: [],
            3: [],
            4: [],
            5: []
          },
          status:{
            1:'待返款',
            2: '返款成功',
            3: '返款失败',
            4: '返款后申诉'
          },
          totalPage:{
            1:0,
            2: 0,
            3: 0,
            4: 0,
            5: 0
          },
          optType: 'success',
          remark: '',
          weChatNick: '',
          weChatDialog: false,
          bankDialog:false,
          bankNameData: [{
            label: '中国工商银行',
            value: '中国工商银行'
          },{
            label: '招商银行',
            value: '招商银行'
          },{
            label: '中国农业银行',
            value: '中国农业银行'
          },{
            label: '中国邮政储蓄银行',
            value: '中国邮政储蓄银行'
          },{
            label: '中国银行',
            value: '中国银行'
          },{
            label: '中国建设银行',
            value: '中国建设银行'
          },{
             label: '兴业银行',
            value: '兴业银行'
          },{
            label: '交通银行',
            value: '交通银行'
          },{
            label: '浦发银行',
            value: '浦发银行'
          },{
            label: '平安银行',
            value: '平安银行'
        }],
        bankForm:{
          token: this.userToken,
          bank: '',
          bank_user_name: '',
          bank_num: ''
        },
        merchantUserInfo: {},
        bankRules: {
         bank: [{ required: true, message: '请选择银行', trigger: 'blur' }],
         bank_num: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
         bank_user_name: [{ required: true, message: '请输入银行卡号', trigger: 'blur' }],
        },
        oldBankInfo: '',
        appealForm: {
          token: '',
          merchantRebateId: '',
          appealImg: ''
        },
        appealReason: '',
        uploadData: {
           area: 'merchantRebate'
        },
        appealDialog: false,
        allTableData: [],
        merchantMoneyText:  window.localStorage.getItem("merchantMoneyText"),
        userToken: window.localStorage.getItem('token')
      }
    },
    created() {
      this.bankForm.token = this.userToken
      this.appealForm.token = this.userToken
      this.getTableData(this.curTab)
      this.getMerchantUserInfo()
    },
    methods:{
      searchTable(){
        this.getTableData(this.curTab)
      },
      getMerchantUserInfo(){
        this.$isClick(true);
        apiMerchantUserInfo({
          token:this.userToken
        }).then(res =>{
          this.$isClick(false);
           if (res.code == 1){
            this.merchantUserInfo = res.msg
            if (this.merchantUserInfo.bank_num) {
              this.oldBankInfo = this.merchantUserInfo.bank + '  尾号  ' + this.merchantUserInfo.bank_num.substring(this.merchantUserInfo.bank_num.length-4,this.merchantUserInfo.bank_num.length)
            }
           } else {
             this.$message.error(res.msg);
           }
        }).catch(res => {
          this.$isClick(false);
            this.$message.error(res.msg)
        })
      },
      getTableData(curTab){
        this.form[curTab].token = this.userToken
        this.$isClick(true);
        apiMerchantRebate(this.form[curTab]).then(res =>{
          this.$isClick(false);
           if (res.code == 1){
            this.tableData[curTab] = res.msg.res
            this.totalPage[curTab] = res.msg.con
           } else {
             this.$message.error(res.msg);
           }
        }).catch(res => {
          this.$isClick(false);
            this.$message.error(res.msg)
        })
      },
      getAllTableData(){
        this.form[1].token = this.userToken
        let data = JSON.parse(JSON.stringify(this.form[1]))
        data.page = 1
        data.pageSize = this.totalPage[1]
        if (data.pageSize == 0) {
           this.$message.error('当前表格没有数据可以导出');
           return
        }
        return new Promise ((resolve) =>{
          this.$isClick(true);
          apiMerchantRebate(data).then(res =>{
            this.$isClick(false);
             if (res.code == 1){
              this.allTableData = res.msg.res
              resolve(res) ;
             } else {
               this.$message.error(res.msg);
             }
          }).catch(res => {
            this.$isClick(false);
              this.$message.error(res.msg)
          })
        })
      },
      getStatusName(row){
        return this.status[row.status]
      },
      changeRebateTimeType(row){
        if (row.rebate_time == 0 || row.rebate_time == '' ||  row.rebate_time == null) {
           return '--'
         }
        if (typeof(row.rebate_time) != 'number') {
          return row.rebate_time
        }
         var date = new Date(row.rebate_time * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
         return this.getFormatTime(date)
      },
      changeOverTimeType(row) {
        if (row.over_time == 0 || row.over_time == '' ||  row.over_time == null) {
          return '--'
        }
       if (typeof(row.over_time) != 'number') {
         return row.over_time
       }
        var date = new Date(row.over_time * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        return this.getFormatTime(date)
      },
      getFormatTime (date){
         var Y = date.getFullYear() + '-';
         var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
         var D = (date.getDate() < 10 ? '0' +  date.getDate() : date.getDate()) + ' ';
         var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
         var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
         var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
         return Y + M + D + h + m + s;
      },
      changeTab(item){
          this.curTab = item.id
          this.getTableData(this.curTab)
      },
      showBatchDialog(type){
        this.optType = type
        this.batchTransferDialog = true
      },
      //批量
      tableSelectionChange(val) {
        this.batchTransferIds = val.map(item => item.id);
      },
      batchTransferSuccess(){
        if(this.optType == 'success'){
          if (this.batchTransferIds.length == 0) {
            this.$message.error('请先选择需要批量转账的订单');
            return
          }
        } else {
          if (this.batchTransferIds.length >= 2) {
            this.$message.error('只能选择其中一行进行操作');
            return
          }
          if(!this.remark){
            this.$message.error('失败原因不能为空');
            return
          }
        }
        this.submitLoading = true
        apiSubmitRebateCheck({
          token: this.userToken,
          ids: this.batchTransferIds,
          status: this.optType == 'success' ? 1 : 2,
          remark: this.optType == 'success' ? '' : this.remark,
          rebateName: this.merchantUserInfo.bank_user_name,
          rebateBankNum: this.merchantUserInfo.bank_num
        }).then(res =>{
           this.submitLoading = false
           if (res.code == 1){
            this.$message.success(res.msg);
            this.batchTransferDialog = false
            this.batchTransferIds = []
            this.getTableData(this.curTab)
           } else {
             this.$message.error(res.msg);
           }
        }).catch(res => {
           this.submitLoading = false
            this.$message.error(res.msg)
        })
      },
      handleSizeChange(val) {
      	this.form[this.curTab].pageSize = val;
      	this.getTableData(this.curTab)
      },
      handleCurrentChange(val) {
      	this.form[this.curTab].page = val;
      	this.getTableData(this.curTab)
      },
      editWechat(){
        if (!this.weChatNick) {
          this.$message.error('微信昵称不能为空');
          return
        }
        this.submitLoading = true
        apiSetWechat({
          token: this.userToken,
          wechatNick: this.weChatNick
        }).then(res =>{
          this.submitLoading = false
           if (res.code == 1){
            this.$message.success('修改成功');
            this.getMerchantUserInfo()
            this.weChatDialog = false
           } else {
             this.$message.error(res.msg);
           }
        }).catch(res => {
          this.submitLoading = false
          this.$message.error(res.msg)
        })
      },
      modifyBank(){
        this.$refs['bankForm'].validate((valid) => {
          if (valid) {
            var regExp = /^([1-9]{1})(\d{15}|\d{16}|\d{17}|\d{18})$/;
            if(!regExp.test(this.bankForm.bank_num)){
              this.$message.error('银行卡号填写不对')
            	return false
            }
             this.submitLoading = true
             apiSetBank(this.bankForm).then(res =>{
               this.submitLoading = false
                if (res.code == 1){
                 this.$message.success('修改成功')
                 this.getMerchantUserInfo()
                 this.bankDialog = false
                 this.$refs['bankForm'].resetFields();
                } else {
                  this.$message.error(res.msg);
                }
             }).catch(res => {
                this.submitLoading = false
                this.$message.error(res.msg)
             })
          }
        })

      },
      //图片上传
      handleAvatarSuccess(res, file) {
         this.appealForm.appealImg = res.msg
         this.$message.success('上传成功');
        },
        beforeAvatarUpload(file) {
          const isLt2M = file.size / 1024 / 1024 < 10;
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 10MB!');
          }
          return isLt2M;
        },
        compressUpload(image) {
            let canvas = document.createElement('canvas')
            let ctx = canvas.getContext('2d')
            let initSize = image.src.length
            let { width } = image, { height } = image
            canvas. width = width
            canvas.height = height
            ctx.fillRect(0, 0, canvas.width, canvas.height)
            ctx.drawImage(image, 0, 0, width, height)

            // 进行最小压缩0.1
            let compressData = canvas.toDataURL('image/jpeg', 0.1)

            // 压缩后调用方法进行base64转Blob，方法写在下边
            let blobImg = this.dataURItoBlob(compressData)
            return blobImg
        },
      /* base64转Blob对象 */
      dataURItoBlob(data) {
          let byteString;
          if(data.split(',')[0].indexOf('base64') >= 0) {
              byteString = atob(data.split(',')[1])
          }else {
              byteString = unescape(data.split(',')[1])
          }
          let mimeString = data
              .split(',')[0]
              .split(':')[1]
              .split(';')[0];
          let ia = new Uint8Array(byteString.length)
          for( let i = 0; i < byteString.length; i += 1) {
              ia[i] = byteString.charCodeAt(i)
          }
          return new Blob([ia], {type: mimeString})
      },
      showAppealDialog(row){
        this.appealDialog = true
        this.appealForm.merchantRebateId = row.id
        this.appealReason = row.appeal_reason
      },
      appeal(){
        this.submitLoading = true
        apiMerchantRebateAppealProcess(this.appealForm).then(res =>{
          this.submitLoading = false
           if (res.code == 1){
            this.$message.success('申诉成功')
            this.getTableData(this.curTab)
            this.appealDialog = false
           } else {
             this.$message.error(res.msg);
           }
        }).catch(res => {
          this.submitLoading = false
          this.$message.error(res.msg)
        })
      },
      toProblemPage(type){
         this.$router.push('/financeManage/transferProblem?type=' + type)
      },
      exportExcel(){
        this.$loading.show('下载中')
        var tableData = []
        // var tableHeader = ['任务编号','店铺名称','订单编号','推手账号','转账本金','提现人','卡号','银行','开户行','微信昵称','转账状态','转账截止时间']
        var tableHeader = ['金额','收款人账号','收款人名称','收款账号开户行名称','收款方所在省','收款方所在市县','转账类型','汇款用途']
        tableData.push(tableHeader)
        this.getAllTableData().then(()=>{
            for (var i in this.allTableData){
              let arr = this.allTableData
              let tableBody = []
              // tableBody = [arr[i].task_code,arr[i].shop_name,arr[i].order_num,arr[i].push_phone, parseFloat(arr[i].rebate_capital).toFixed(2),
              // arr[i].push_name,arr[i].bank_num,arr[i].bank,arr[i].bank_name,arr[i].wechat_nick,this.status[arr[i].status],this.changeOverTimeType(arr[i])]
              tableBody = [arr[i].rebate_capital,arr[i].bank_num,arr[i].push_name,arr[i].bank_name,arr[i].bank_province,arr[i].bank_city,'','']
              tableData.push(tableBody)
            }
            var tipsData = [
              [''],
              [''],
              ['说明：'],
              ['1、必须按图例所示按顺序填写每列内容；',null,null,null,null,null],
              ['2、金额栏的“单元格格式”类别应设置为“数值型”；',null,null,null,null,null],
              ['3、收款人名称栏、收款账号开户行名称、收款方所在省、收款方所在市县、转账类型、汇款用途的“单元格格式”类别应设置为“文本型”；',null,null,null,null,null,null,null,null,null,null],
              ['4、转账类型的写法：如果收款人是平安银行(原深圳发展银行)开户，应填写“行内转账”，如果收款人是深圳市内其他银行开户，应填写“同城跨行”，如果收款人是外地其他银行开户，应填写“异地跨行”；',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],
              ]
            for (var j in tipsData){
              tableData.push(tipsData[j])
            }
            var sheet = this.XLSX.utils.aoa_to_sheet(tableData);
            var wb = {
                SheetNames: ['Sheet1'],
                Sheets: {
                  Sheet1: sheet
                }
            };
            var tmpDown = new Blob([
                    this.s2ab(
                        // 这里的数据是用来定义导出的格式类型
                        this.XLSX.write(wb, {
                            bookType: 'xlsx',
                            bookSST: false,
                            type: 'binary'
                        })
                    )
                ], {
                    type: "application/octet-stream"
                });
            this.FileSaver.saveAs(tmpDown,'待返款订单.xlsx')
            setTimeout(() => {
              this.$loading.hide()
              this.$message.success('下载完成')
            }, 1000);
        })
      },

      s2ab(s) {
          if (typeof ArrayBuffer !== 'undefined') {
              var buf = new ArrayBuffer(s.length);
              var view = new Uint8Array(buf);
              for (var i = 0; i != s.length; ++i) {
                  view[i] = s.charCodeAt(i) & 0xFF;
              }
              return buf;
          } else {
              var buf = new Array(s.length);
              for (var i = 0; i != s.length; ++i) {
                  buf[i] = s.charCodeAt(i) & 0xFF;
              }
              return buf;
          }
      },
    }
  }
</script>

<style lang="less">
  #merchant-rebate {
    .bank-dialog {
      .el-form-item__content {
        margin-left: 0!important;
      }
    }
    .card{
      background: #FFFFFF;
      margin-bottom: 16px;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
      padding-bottom: 16px;
      border-radius: 5px;
      .card-header {
        background: #ecf5ff;
        padding: 10px;
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        .title {
          line-height: 20px;
          border-left: 3px solid #666666;
          padding-left: 10px;
          font-size: 16px;
          font-weight: 700;
          color: #333333;
          width: 150px;
        }
      }
      .card-content {
        padding: 10px 20px;

        .el-dialog__footer {
          text-align: right !important;
        }

        .rebate-cancel-btn {
          background: #fff !important;
          color: #333333 !important;
          height: 35px;
          padding: 0 20px;
          margin-right: 30px !important;
          border: 1px solid #aba7a7 !important;
        }
        .rebate-confirm-btn {
          background-color: @themeColor!important;
          color: #fff!important;
          height: 35px;
          padding: 0 20px;
        }
        .el-table {
          text-align: center;
          border-radius: 5px;
          .appeal-btn{
            background: @themeColor;
            color: #FFFFFF;
            font-size: 14px;
            padding: 10px;
          }
          .preview-img {
              position: relative;

              .preview-img-small {
                margin: 0 auto;
                display: flex;
                width: 80%;
              }

              .preview-img-large {
                display: none;
                position: fixed;
                left: 0;
                top: -100%;
                width: 300px;
                max-width: 25%;
                z-index: 9;
              }
            }
        }
        .el-table tr {
          background-color: #fff;
          padding: 8px 0!important;
        }
        .el-table td {
          text-align: center;
        }
        .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
          border-color: #e0e0e0;
        }
        .el-table th {
          background: #efefef!important;
          color: #666 !important;
          text-align: center;
          font-weight: 400;
           padding: 8px 0!important;
        }
        .el-form-item {
          display: inline-block;
          margin-right: 20px;
        }
        .el-form-item__content {
          width: 200px;
        }
        .bank-user-info {
          border-bottom: 1px dashed #e0e0e0;
          padding-bottom: 16px;
          margin-bottom: 16px;
          .title {
            width: 100px;
            text-align: right;
            display: inline-block;
          }
        }
        .redColorStyle {
          color: red;
        }
        .dialog-name {
          margin: 10px 0;
        }
        .img-box {
          display: inline-block;
          margin-right: 10px;
          .el-upload--picture-card {
            width: 150px;
            height: 200px;
          }
          .el-upload-list--picture-card .el-upload-list__item {
            width: 150px;
            height: 200px;
          }
          .el-upload--picture-card i {
            vertical-align: top;
          }

          /deep/ .el-upload-list--picture-card .el-progress {
                height: 80px;
                width: 80px;
           }
          /deep/ .el-progress-circle {
            height: 80px !important;
            width: 80px !important;
            svg {
                  height: 80px;
                  width: 80px;
            }
          }
        }
         .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
          }
          .img-show{
            width: 150px;
            height: 200px;
          }
          .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
          }
          .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 150px;
            height: 200px;
            line-height: 200px;
            text-align: center;
          }
          .avatar {
            width: 150px;
            height: 200px;
            display: block;
          }
        .page-upper-half {
          margin-bottom: 20px;
          display: flex;
          justify-content:space-between;
          .left-box {
            display: inline-block;
            .title {
              font-size: 14px;
              font-weight: bold;
            }
            .steps {
              display: flex;
              // justify-content:center;
              align-items: center;
              margin-top: 10px;
              margin-bottom: 16px;
              .step {
                .step-number {
                  display: inline-flex;
                  justify-content: center;
                  align-items: center;
                  width: 20px;
                  height: 20px;
                  font-size: 14px;
                  border-radius: 50%;
                  border: 2px solid @themeColor;
                  font-weight: bold;
                  background-color: @themeColor;
                  color: #fff;

                }
                .step-tips {
                  font-size: 14px;
                  margin-top: 10px;
                  height: 40px;
                }
                .step-line {
                  height: 1px;
                  width: 100px;
                  background: #303133;
                  display: inline-flex;
                  vertical-align: middle;
                }
              }

            }
            .user-info {
              margin-top: 16px;
              .user-bank-box {
                background: #9c9c9c;
                color: #FFFFFF;
                width: 240px;
                padding: 10px;
                border-radius: 10px;
                display: inline-block;
                .bank-name {
                  padding-bottom: 10px;
                  border-bottom: 1px solid #FFFFFF;
                }
                .bank-number {
                  padding: 10px 0;
                }
                .bank-opt {
                  font-size: 14px;
                  .user-name {

                  }
                  .modify-btn{
                      background: @themeColor;
                      padding: 2px 15px;
                      border-radius: 5px;
                      font-size: 12px;
                      cursor: pointer;
                      float: right;
                  }
                }
              }
              .user-weChat-box {
                display: inline-block;
                background: #9c9c9c;
                color: #FFFFFF;
                width: 180px;
                padding: 10px;
                border-radius: 10px;
                margin-left: 20px;
                .user-weChat-name {
                  padding-bottom: 10px;
                  border-bottom: 1px solid #FFFFFF;
                }
                .user-weChat-number {
                  padding: 10px 0;
                }
                .user-weChat-opt {
                  .edit-btn {
                    background: @themeColor;
                    padding: 2px 15px;
                    border-radius: 5px;
                    font-size: 12px;
                    cursor: pointer;
                  }
                }
              }
            }
          }
          .right-box {
            float: right;
            vertical-align: top;
            margin-left: 30px;
            background: #f2f2f2;
            padding: 10px;
            font-size: 14px;
            .provision-box {
              border-bottom: 1px dashed #b1b1b1;
              padding-bottom: 10px;
              .title {
                font-size: 14px;
                font-weight: bold;
                margin-bottom: 10px;
              }
              .provision-content {
                  line-height: 26px;
              }
            }
            .problem-box {
              padding-top: 20px;
              .problem-title {
                line-height: 26px;
                cursor: pointer;
                img {
                  width: 15px;
                  height: 15px;
                  margin-right: 10px;
                  vertical-align: middle;
                  margin-top: -2px;
                }
              }
            }
          }
        }
        .table-opt-box {
          margin-top: 10px;
          .el-form-item__content {
            width: 200px;
            display: inline-block;
          }
          .success-btn {
            background: @themeColor;
            color: #FFFFFF;
            font-size: 14px;
            height: 32px !important;
            padding: 0px 10px !important;
          }
          .export-btn {
            background: #ff7f4b;
            height: 32px !important;
            padding: 0px 10px !important;
            color: #ffffff;
            i {
            	font-size: 14px;
            }
            margin-left: 30px;
          }
          .fail-btn {
            background: red;
            color: #FFFFFF;
            font-size: 14px;
            height: 32px !important;
            padding: 0px 10px !important;
          }
        }
        .tabs {
          display: flex;
          // justify-content:space-between;
          align-items:flex-start;
          border-radius: 5px;
          .tab-pane {
            background: #eee;
            padding: 10px 20px;
            width: 20%;
            font-size: 14px;
            border-right: 1px solid #FFFFFF;
            cursor: pointer;
            text-align: center;
             &.active {
              color: #FFFFFF;
              background: @themeColor;
            }
          }
        }
      }
    }
  }
  .el-popover {
    .wxpaycode-preview-img {
      width: 200px;
      height: 300px;
    }
  }
</style>
